<template>
  <div class="member-rights">
    <Row type='flex' align='middle' justify="center" style="padding: 30px 20px;">
      <!-- <Col>
        <RadioGroup v-model="buttonValue" type="button">
          <Radio label="0">兑换权益</Radio>
          <Radio label="1">消费权益</Radio>
        </RadioGroup>
      </Col> -->
      <Col>
        <span style="color:#808695;">此设置为: 不同会员等级,彩票兑换礼品时享受的不同折扣权益</span>
        <!-- <span style="margin-left:24px"><Icon type="ios-help-circle" size='20' /></span> -->
      </Col>
    </Row>
    <Row type='flex' justify="center" style="margin-top:50px">
      <Col>
        <Form ref="formInline" :model="formModel"  :label-width="150">
          <FormItem :rules="[{required: true, message: '折扣不能为空', trigger: 'blur'}]"  v-for="(item, index) in formModel.memberLevelList" :key='index' :prop="'memberLevelList.'+ index +'.discount'" :label="'v' + item.memberLevel + '等级，兑换享受：'" >
            <Row type='flex' align='middle'>
              <Col>
                <Input type="text" v-model="item.discount" :maxlength="3" placeholder="请输入" @on-blur="priceBlur(index)" @on-keyup="filterSpace(index)" style="width:200px"></Input>
              </Col>
              <Col style="margin-left:12px"><span>折扣</span></Col>
            </Row>
          </FormItem>
          <FormItem>
            <Button type="primary" style="width:100px" @click="handleSubmit">确定</Button>
            <Button class="btn"
                  style="margin-left:20px;width:100px"
                  @click="closePage">取消</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import { setMemberRights, getMemberLevelList } from '@/api/member/index'
import { routeEqual } from '@/libs/util'
export default {
  name: 'member_rights_rule',
  data () {
    return {
      formModel: {
        memberLevelList: []
      }
    }
  },
  methods: {
    filterSpace (index) {
      let val = this.formModel.memberLevelList[index].discount
      if (val !== '' && val.substring(0, 1) === '.') {
        val = ''
      }
      val = val.replace(/^0*(0\.|[1-9])/, '$1')
      val = val.replace(/[^\d.]/g, '')
      val = val.replace(/\.{2,}/g, '.')
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      val = val.replace(/^(-)*(\d+)\.(\d).*$/, '$1$2.$3')
      if (val.substring(0, 1) === '0') {
        val = ''
      }
      if (val > 10) {
        val = val.substring(0, val.length - 1)
      }
      if (val.indexOf('.') === 2) {
        val = val.substring(0, 2)
      }
      this.formModel.memberLevelList[index].discount = val
    },
    priceBlur (index) {
      let val = this.formModel.memberLevelList[index].discount
      if (val.indexOf('.') === 1 && val.length < 3) {
        val = val.substring(0, 1)
      }
      this.formModel.memberLevelList[index].discount = val
    },
    handleSubmit () {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          setMemberRights(this.formModel.memberLevelList).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('会员权益规则设置成功')
              this.closePage()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    closePage () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'member_rights_list'
        })
      })
    }
  },
  created () {
    getMemberLevelList({
      merchantId: this.$store.state.user.merchantId
    }).then(res => {
      if (res.data.status === 200) {
        this.formModel.memberLevelList = res.data.data.map((item, i) => {
          if (!item.discount) {
            item.discount = ''
          } else {
            item.discount = item.discount + ''
          }
          item.index = i
          return item
        })
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>
